import 'package:flutter/material.dart';
import 'package:internet_celebrity_growth_system/Questionmark.dart';
import 'package:internet_celebrity_growth_system/main.dart';

/*个人中心页*/
class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePage();
}

class _HomePage extends State<HomePage> {

  List menuTitles = [
    '绑定账号',
    '阅读记录',
    '绑定博客',
    '我的活动',
    '邀请好友',
    '联系我们',
  ];
  List menuIcons = [
    Icons.message,
    Icons.print,
    Icons.lock,
    Icons.send,
    Icons.person,
    Icons.phone,
  ];


  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [Color(0xFFB6F3EA), Colors.white70], //背景渐变色：顶部蓝色到底部灰色
            begin: Alignment.topCenter, //颜色渐变从顶部居中开始
            end: Alignment.bottomCenter, //颜色渐变从底部居中结束
          )
      ), //背景装饰：颜色渐变
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            topInfo(context), //头像+昵称+编辑资料
            commonFunction(), //常用功能
            SizedBox(height: 10,),
            for (int index = 0; index < menuTitles.length; index++)
              Column(
                children: [
                  ListTile(
                    leading: Icon(menuIcons[index]), // 使用 menuIcons 中的图标作为 leading
                    title: Text(menuTitles[index]), // 使用 menuTitles 中的标题
                    onTap: () {
                      // 处理菜单项点击事件
                    },
                  ),
                  Divider(), // 添加分隔线
                ],
              ),
          ],
        ),
      )
    );
  }

  /*顶部信息：头像+昵称+编辑资料+小红书账号*/
  Padding topInfo(BuildContext context){
    return Padding(
      padding: const EdgeInsets.fromLTRB(30, 90, 10, 40),
      child: Row(
        children: [
          GestureDetector(
            child: ClipOval(
              child: Image.asset('lib/images/userImage.png', width: 65, height: 65, fit: BoxFit.cover),
            ),
            onTap: (){

            },
          ),
          const SizedBox(width: 16), // 添加间距
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('窝也想学穿搭', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 16)),
              SizedBox(height: 10), // 添加间距
              Text(
                '小红书账号: 102372646',
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
          const Spacer(), // 添加间距
          TextButton  (
            style: ButtonStyle(
              minimumSize: MaterialStateProperty.all(const Size(80, 60)), //按钮宽高设置
              foregroundColor: MaterialStateProperty.all<Color>(const Color.fromARGB(100, 30, 144, 255)), //背景色
              shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))), //圆角
            ),
            child: const Text('编辑资料', style: TextStyle(color: Colors.blueAccent)),
            onPressed: () {

            },
          ),
        ],
      ),
    );
  }


  /*常用功能*/
  Container commonFunction(){
    return Container(
        margin: const EdgeInsets.all(5),
        height: 120,
        width: 360,
        decoration: BoxDecoration(
          color: const Color.fromARGB(200, 248, 248, 255),  // 白色
          borderRadius: BorderRadius.circular(12), // 设置圆角
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向平分
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向（横向）间距
              children: [
                Column(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.account_box_rounded),
                      onPressed: () {
                        Navigator.of(context).push(MaterialPageRoute(builder: (context) => QuestionmarkPage()));
                      },
                      color: Colors.blue,
                    ),
                    const Text('个人定位'),
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.directions_boat),
                      onPressed: () {},
                      color: Colors.redAccent,
                    ),
                    const Text('动态'),
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.settings),
                      onPressed: () {},
                      color: Colors.green,
                    ),
                    const Text('设置'),
                  ],
                ),
                Column(
                  children: [
                    IconButton(
                      icon: const Icon(Icons.output),
                      onPressed: () {
                        Navigator.pushReplacement(
                          context,
                          MaterialPageRoute(builder: (context) => LoginPage(title: '登录',)),
                        );
                      },
                      color: Colors.deepOrangeAccent,
                    ),
                    const Text('退出'),
                  ],
                )
              ],
            )
          ],
        )
    );
  }

}